<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 此例子是结合bootstrap的Datatables，暂且定位为最基本的例子吧 -->
    <!-- 引入必须的css和js文件 -->
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"
    />
    <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.js"></script>
    <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>

  </head>

  <body>
    <!-- HTML代码片段中请勿添加<body>标签 //-->
    <div id="container">
      <!-- 定义一个表格元素 -->
      <button id="redraw">更换数据源</button>
      <table id="example" class="table table-striped table-bordered">
        <thead>
          <tr>

            <th>序号</th>
            <th>标题</th>
            <th>连接</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 3 Data 1</td>
            <td>Row 3 你好</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 4 Data 1</td>
            <td>Row 4 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 5 Data 1</td>
            <td>Row 5 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 6 Data 1</td>
            <td>Row 6 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 7 Data 1</td>
            <td>Row 7 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 8 Data 1</td>
            <td>Row 8 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row 9 Data 1</td>
            <td>Row 9 Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row a Data 1</td>
            <td>Row a Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row b Data 1</td>
            <td>Row b Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row c Data 1</td>
            <td>Row c Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row d Data 1</td>
            <td>Row d Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
          <tr>
            <td>Row e Data 1</td>
            <td>Row e Data 2</td>
            <td>Row 1 Data 2</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>序号</th>
            <th>标题</th>
            <th>连接</th>
          </tr>
        </tfoot>
        <!-- tbody是必须的 -->
      </table>
    </div>


  </body>

</html>